import React, { useState } from 'react';
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonButtons,
  IonButton,
  IonIcon,
  IonBackButton,
} from '@ionic/react';
import { volumeHigh, volumeMute } from 'ionicons/icons';
import LanguageSelector from '../components/translator/LanguageSelector';
import TranslationInput from '../components/translator/TranslationInput';
import TranslationResults from '../components/translator/TranslationResults';
import { useTranslatorStore } from '../store/translator';

const TranslatorPage: React.FC = () => {
  const [sourceLanguage, setSourceLanguage] = useState('auto');
  const [targetLanguage, setTargetLanguage] = useState('zh');
  const [fontSize, setFontSize] = useState<'small' | 'medium' | 'large'>('medium');
  const [isSpeakerOn, setIsSpeakerOn] = useState(false);
  const { translate } = useTranslatorStore();

  const handleSwapLanguages = () => {
    if (sourceLanguage !== 'auto') {
      const temp = sourceLanguage;
      setSourceLanguage(targetLanguage);
      setTargetLanguage(temp);
    }
  };

  const handleTranslate = async (text: string) => {
    if (text.trim()) {
      await translate(text, sourceLanguage, targetLanguage, isSpeakerOn);
    }
  };

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton defaultHref="/" />
          </IonButtons>
          <IonTitle>美女翻译官</IonTitle>
          <IonButtons slot="end">
            <IonButton onClick={() => setIsSpeakerOn(!isSpeakerOn)}>
              <IonIcon icon={isSpeakerOn ? volumeHigh : volumeMute} />
            </IonButton>
          </IonButtons>
        </IonToolbar>

        <LanguageSelector
          sourceLanguage={sourceLanguage}
          targetLanguage={targetLanguage}
          onSwap={handleSwapLanguages}
          onSourceChange={setSourceLanguage}
          onTargetChange={setTargetLanguage}
        />
      </IonHeader>

      <IonContent>
        <TranslationResults fontSize={fontSize} isSpeakerOn={isSpeakerOn} />
      </IonContent>

      <TranslationInput onTranslate={handleTranslate} />
    </IonPage>
  );
};

export default TranslatorPage;